<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>选择门店</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			.select{
				width: 40px;
				height: 2px;
				background-color: #DBA817;
				display: block;
				margin-left: 12px;
				margin-top: 2px;
			}
		
		</style>
		<script type="text/javascript">
		function XuanZeMenDian()
		{
			document.getElementById("changyongshoucang").style.color="#000000";
			document.getElementById("xuanzemendian").style.color="#DBA817";
			document.getElementById("changyongshoucangspan").classList.remove("select");
			document.getElementById("xuanzemendianspan").classList.add("select");
			document.getElementById("divchangyongshoucang").style.display="none";
			document.getElementById("divxuanzemendian").style.display="";
		}
		function ChangYongShouCang()
		{
			document.getElementById("xuanzemendian").style.color="#000000";
			document.getElementById("changyongshoucang").style.color="#DBA817";
			document.getElementById("changyongshoucangspan").classList.add("select");
			document.getElementById("xuanzemendianspan").classList.remove("select");
			document.getElementById("divchangyongshoucang").style.display="";
			document.getElementById("divxuanzemendian").style.display="none";
		}
		function HideMap()
		{
			if(document.getElementById("maps").style.display=="none")
			{
				document.getElementById("maps").style.display="";
				document.getElementById("shangspan").style.display="";
				document.getElementById("xiaspan").style.display="none";
			}
			else
			{
				document.getElementById("maps").style.display="none";
				document.getElementById("shangspan").style.display="none";
				document.getElementById("xiaspan").style.display="";
			}
		}
		</script>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px;width: 396px;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>
				<div style="height: 50px;width: 396px;background-color: white;display: flex;justify-content: space-between;align-items: center;">
					<div>
						<a href="dingdanjiesuan.html">
							<div style="margin-left: 20px;">《</div>
						</a>
					</div>
					<div style="width: 240px;">
						<span style="margin-top: 5px;display: inline-block;">选择门店</span>
					</div>
				</div>
				<div style="display: flex;justify-content: space-around;height: 40px;align-items: center;background-color: rgb(255 240 243);">
					<div style="color: #DBA817;cursor: pointer;" id="xuanzemendian" onclick="XuanZeMenDian();">
						选择门店
						<span id="xuanzemendianspan" class="select"></span>
					</div>
					<div style="cursor: pointer;" id="changyongshoucang" onclick="ChangYongShouCang();">
						常用/收藏
						<span id="changyongshoucangspan"></span>
					</div>
				</div>
				<div id="divxuanzemendian" >
					<p style="padding: 20px;background-color: white;">全部城区 ></p>
					<img src="image/map.png" alt="" style="width: 100%;" id="maps">
					<p style="text-align: center;background-color: rgb(255 240 243);height: 30px;line-height: 1.8;cursor: pointer;" onclick="HideMap()">收起地图︿</p>
					<div style="background-color: rgb(242 242 242)">
						<div style="margin:10px 15px;background-color: white;border: 1px solid rgb(219, 168, 113);border-radius: 5px;display: flex;justify-content: space-between;align-items: center;position: relative;">
							<div style="padding: 10px;">
								<p style="color: #333333;font-weight: 600;">美年广场GO店</p>
								<div>
									<div style="width: 120px;height: 20px;background-color: #f2f2f2;border-radius: 5px;display: inline-block;">
										<div style="width: 30px;border-radius: 5px;height: 20px;background-color: #83d207;"></div>
										<p style="font-size: 12px;margin-top: -18px;margin-left: 20px;">9单/23杯制作中</p>
									</div>
									<span style="font-size: 12px;background-color: rgba(202, 249, 130, 0.38);color:#70b503 ;">可外送</span>
								</div>
								<div style="display: flex;justify-content: start;font-size: 12px;margin: 8px 0;">
									<div><span style="color: #7f7f7f;width: 200px;display: inline-block;" >高新区天府大道中段1388号“红糖”14栋1层3号（L105号）号商铺</span></div>
								</div>
								<div style="display: flex;justify-content: start;font-size: 12px;color: #C3C3C3;">
									<div><span style="color: #7f7f7f;width: 200px;display: inline-block;" >10:00~22:00</span></div>
								</div>
							</div>
							<div style="width: 80px;height: 83px;position: relative;border-left: 1px solid #eeeeee;">
								<div style="position: absolute;top: 0;right: 0;bottom: 0;left: 10px;margin: auto;height: 40px;">
									<p>去下单</p>
									<p style="color: #777777;font-size: 12px;margin-top: 5px;">距离5.4km</p>
								</div>
							</div>
						</div>
						
						<div style="margin:10px 15px;background-color: white;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;position: relative;">
							<div style="padding: 10px;">
								<p style="color: #333333;font-weight: 600;">世豪广场店</p>
								<div>
									<div style="width: 120px;height: 20px;background-color: #f2f2f2;border-radius: 5px;display: inline-block;">
										<div style="width: 30px;border-radius: 5px;height: 20px;background-color: #83d207;"></div>
										<p style="font-size: 12px;margin-top: -18px;margin-left: 20px;">9单/23杯制作中</p>
									</div>
									<span style="font-size: 12px;background-color: rgba(202, 249, 130, 0.38);color:#70b503 ;">可外送</span>
								</div>
								<div style="display: flex;justify-content: start;font-size: 12px;margin: 8px 0;">
									<div><span style="color: #7f7f7f;width: 200px;display: inline-block;" >高新区天府大道中段1388号“红糖”14栋1层3号（L105号）号商铺</span></div>
								</div>
								<div style="display: flex;justify-content: start;font-size: 12px;color: #C3C3C3;">
									<div><span style="color: #7f7f7f;width: 200px;display: inline-block;" >10:00~22:00</span></div>
								</div>
							</div>
							<div style="width: 80px;height: 83px;position: relative;border-left: 1px solid #eeeeee;">
								<div style="position: absolute;top: 0;right: 0;bottom: 0;left: 10px;margin: auto;height: 40px;">
									<p>去下单</p>
									<p style="color: #777777;font-size: 12px;margin-top: 5px;">距离5.4km</p>
								</div>
							</div>
						</div>
						<div style="margin:10px 15px;background-color: white;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;position: relative;">
							<div style="padding: 10px;">
								<p style="color: #333333;font-weight: 600;">世豪广场店</p>
								<div>
									<div style="width: 120px;height: 20px;background-color: #f2f2f2;border-radius: 5px;display: inline-block;">
										<div style="width: 30px;border-radius: 5px;height: 20px;background-color: #83d207;"></div>
										<p style="font-size: 12px;margin-top: -18px;margin-left: 20px;">9单/23杯制作中</p>
									</div>
									<span style="font-size: 12px;background-color: rgba(202, 249, 130, 0.38);color:#70b503 ;">可外送</span>
								</div>
								<div style="display: flex;justify-content: start;font-size: 12px;margin: 8px 0;">
									<div><span style="color: #7f7f7f;width: 200px;display: inline-block;" >高新区天府大道中段1388号“红糖”14栋1层3号（L105号）号商铺</span></div>
								</div>
								<div style="display: flex;justify-content: start;font-size: 12px;color: #C3C3C3;">
									<div><span style="color: #7f7f7f;width: 200px;display: inline-block;" >10:00~22:00</span></div>
								</div>
							</div>
							<div style="width: 80px;height: 83px;position: relative;border-left: 1px solid #eeeeee;">
								<div style="position: absolute;top: 0;right: 0;bottom: 0;left: 10px;margin: auto;height: 40px;">
									<p>去下单</p>
									<p style="color: #777777;font-size: 12px;margin-top: 5px;">距离5.4km</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div id="divchangyongshoucang" style="display: none;width: 396px;height: 530px;color: rgb(242 242 242);">
					<img src="image/empty.png" style="width: 150px;height: 150px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;" >
				</div>
			</div>
			
		</div>
	</body>
</html>
